<template>
    <div class="balance-main">
      <div class="top">
        <div class="top-left">
          <div class="dot-common"></div>
          <span class="text">我的余额</span>
        </div>
        <div class="top-right">
          <!-- <div class="button">立即提现</div>
          <div class="button">立即充值</div> -->
        </div>
      </div>
      <div class="top-second">
        <div class="top-second-left">￥&nbsp;{{ twoFixed(800000) }}</div>
      </div>
  
      <div class="content">
        <Balance
          :showTitle="true"
          title="金币变动明细"
          :searchPlaceholder="`搜索流水号和订单号`"
        >
          <template #header>
            <div class="header">
              <div class="part">
                收入：<span class="value">￥&nbsp;{{ twoFixed(800000) }}</span>
              </div>
              <div class="part">
                支出：<span class="value">￥&nbsp;{{ twoFixed(500000) }}</span>
              </div>
            </div>
          </template>
        </Balance>
  
        <div class="table-container"><Table 
          :topCss="{
              background:'#f5f8fe',
              height:'.3042rem',
              fontSize:'.0893rem'
          }"
          :tdCss="{
              fontSize:'.07rem',
              padding:'.04rem'
          }"
          :lineCss="{
              height:`.2188rem`,
              background:'#f5f8fe',
          }"
          :borderSpacing="`0 .0729rem`"
          headerFamily="PuHuiMedium"
          :dataSource="mineBalance"
          :headerFontSize="`400`" 
          :column="column"></Table></div>
      </div>
    </div>
  </template>
  <script setup lang="ts" name="">
  import { ref } from "vue";
  import { twoFixed } from "@/utils/util";
  import Balance from "@/components/Balance/index.vue";
  import Table,{Column} from "@/components/Table";
  import mineBalance  from "@/json/mineBalance.json";
  
  const column = ref<Array<Column>>([
    { title: "流水号", dataKey: "serial_number", width: 200,align:'center' },
    { title: "操作事项", dataKey: "handle_matters",align:'center'},
    { title: "时间", dataKey: "time", width: 180 ,align:'center'},
    { title: "金额", dataKey: "amount", width: 180,align:'center' },
    { title: "变动后的金币", dataKey: "after_amount", width: 180,align:'center' },
  ]);
  
  
  </script>
  <style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
    @import "./pc.scss";
  }
  </style>
  